<template>
  <div class="about">
    <Header></Header>
    <div class="contenBox">
      <img class="contenBox-ok" src="@/assets/ok.png" alt="" />
      <h1>Personal Details</h1>
      <div>Your Personal Details</div>
      <el-divider></el-divider>

      <div class="contenBox-from">
        <div
          class="contenBox-from-item"
          v-for="(item, index) in fromList"
          :key="index"
        >
          <div class="contenBox-from-item-l">{{ item.left }}</div>
          <div class="contenBox-from-item-r">{{ item.right }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header";
export default {
  data() {
    return {
      fromList: [
        {
          left: "First Name",
          right: "text",
        },
        {
          left: "Last Name",
          right: "text",
        },
        {
          left: "Gender",
          right: "Male",
        },
        {
          left: "Participation Method",
          right: "Offline",
        },
        {
          left: "Passport Number",
          right: "+77 6688 9990",
        },
        {
          left: "Organization",
          right: "text",
        },
        {
          left: "Position",
          right: "text",
        },
        {
          left: "Nationality",
          right: "text",
        },
        {
          left: "Email",
          right: "text",
        },
        {
          left: "Phone Number",
          right: "+77 6688 9990",
        },
        {
          left: "Contact Person Of Organization",
          right: "Yes",
        },
      ],
    };
  },
  components: { Header },
  mounted() {},
  methods: {},
};
</script>
<style scoped lang="scss">
.contenBox {
  width: 55%;
  margin: auto;
  margin-top: 50px;
  position: relative;
  h1 {
    text-align: center;
  }
  &-ok {
    position: absolute;
    right: 0;
    top: -40px;
    width: 190px;
  }
  &-from {
    &-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      &-l {
        width: 45%;
      }
      &-r {
        width: 55%;
        border-bottom: 1px solid #dcdfe6;
        padding: 15px 0;
        color: #595757;
      }
    }
  }
}
</style>
